import { Input, Select, Button, Table, Switch, Typography, Upload, Modal } from 'antd'
import axios from 'axios'
import { useState, useEffect } from 'react'
import { DownloadOutlined, PlusCircleTwoTone } from '@ant-design/icons'
import { get_student,add_student,update_student, dele_student1 } from '../request/instance'
export default function App() {
    let [list, setList] = useState([])//教师数据
    let [document, setDocument] = useState([])//证件类型
    let [clas, setClas] = useState([])//班级
    let [grade, setGrade] = useState([])//年级
    let [slength, setSlength] = useState(0)//长度
    let [find_class, setFind_class] = useState('')
    let [find_grade, setFind_grade] = useState('')
    let [find_name, setFind_name] = useState('')
    let [find_number, setFind_number] = useState('')
    let [search, setSearch] = useState(0)
    let [open, setOpen] = useState(false)
    let [open1, setOpen1] = useState(false)
    let [add_name, setAdd_name] = useState('')
    let [add_sex, setAdd_sex] = useState('')
    let [add_mother,setAdd_mother]=useState('')
    let [add_mphone, setAdd_Mphone] = useState('')
    let [add_father,setadd_father]=useState('')
    let [add_fphone, setAdd_fphone] = useState('')
    let [add_document, setAdd_document] = useState('')
    let [add_number, setAdd_number] = useState('')
    let [add_snumber, setAdd_snumber] = useState('')
    let [add_ori, setAdd_ori] = useState('')
    let [add_grade, setAdd_grade] = useState('')
    let [add_class, setAdd_class] = useState('')
    let [update_name, setUpdate_name] = useState('')
    let [update_sex, setUpdate_sex] = useState('')
    let [update_mother,setUpdate_mother]=useState('')
    let [update_mphone, setUpdate_mphone] = useState('')
    let [update_father,setUpdate_father]=useState('')
    let [update_fphone, setUpdate_fphone] = useState('')
    let [update_snumber, setUpdate_snumber] = useState('')
    let [update_document, setUpdate_document] = useState('')
    let [update_number, setUpdate_number] = useState('')
    let [update_ori, setUpdate_ori] = useState('')
    let [update_grade, setUpdate_grade] = useState('')
    let [update_class, setUpdate_class] = useState('')
    let [update__id, setUpdate__id] = useState('')
    const [tableParams, setTableParams] = useState({
        pagination: {
          current: 1,
          pageSize: 2,
        },
      });
    let get_list = async () => {
        console.log(add_name);

        let obj = {}
        if (find_class) {
            obj.class = find_class
        }
        if (find_grade) {
            obj.grade = find_grade
        }
        if (find_name) {
            obj.name = find_name
        }
        if (find_number) {
            obj.number = find_number
        }
        let {
            data: { student, clas, document,slength, grade }
        } =await get_student(obj)
            setList(student)
            setClas(clas)
            setDocument(document)
            setSlength(slength)
            setGrade(grade)
       
    }
    useEffect(() => {
        get_list()
        setTableParams({
            ...tableParams,
            pagination: {
              ...tableParams.pagination,
              total: length,
            },
    })
    }, [search])
    const handleChange = (value) => {
        setFind_grade(value)
        console.log(value);

    };
    const handleChange1 = (value) => {
        setFind_class(value)
        console.log(value);
    };
    const find_search = () => {
        setSearch(1)
        get_list()
    }
    const reset = async () => {
        setFind_class('')
        setFind_name('')
        setFind_number('')
        setFind_grade('')
        setSearch(0)
    }
    let columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'id'
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'id'
        },
        {
            title: '证件类型',
            render: (_, e) => {
                return e.document.document
            },
            key: 'id'
        },
        {
            title: '学号',
            dataIndex: 'snumber',
            key: 'id'
        },
        {
            title: '证件号码',
            dataIndex: 'number',
            key: 'id'
        },
        {
            title: '学校',
            dataIndex: 'school',
            key: 'id'
        },
        {
            title: '年级',
            render: (_, e) => {
                return e.grade.grade
            },
            key: 'id'
        },
        {
            title: '行政班级',
            render: (_, e) => {
                return e.class.class
            },
            key: 'id'
        },
        {
            title: '创建时间',
            dataIndex: 'start_time',
            key: 'id'
        },
        {
            title: '系统状态',
            key: 'id',
            render: (_, e) => {
                return <Switch checked={e.staut} />
            }
        },
        {
            title: '操作',
            key: 'id',
            render: (_, e) => {
                return <>
                    <span style={{ color: 'blue' }} onClick={() => { get_update(e) }}>编辑</span>
                    <span onClick={() => { dele(e) }} style={{ color: 'blue', marginLeft: '20px' }}>删除</span>
                    <span onClick={() => { get_update(e) }} style={{ color: 'blue', marginLeft: '20px' }}>查看</span>
                </>
            }
        },
    ]
    let add = async () => {
        await add_student({
            id: slength + 1,
            snumber:add_snumber,
            name: add_name,
            sex: add_sex,
            number: add_number,
            mother:add_mother,
            mphone: add_mphone,
            father:add_father,
            fphone:add_fphone,
            ori: add_ori,
            class: add_class,
            grade: add_grade,
            document: add_document
        }).then(res=>{
            if (res.data.code == 200) {
                alert('添加成功')
                setOpen(false)
                get_list()
            }
        })
    }
    let get_update = (e) => {
        setUpdate_class(e.class._id)
        setUpdate_mother(e.mother)
        setUpdate_mphone(e.mphone)
        setUpdate_father(e.father)
        setUpdate_fphone(e.fphone)
        setUpdate_document(e.document._id)
        setUpdate_snumber(e.snumber)
        setUpdate_grade(e.grade._id)
        setUpdate_name(e.name)
        setUpdate_number(e.number)
        setUpdate_ori(e.ori)
        setUpdate_sex(e.sex)
        setUpdate__id(e._id)
        setOpen1(true)

    }
    let update = async () => {
        await update_student({
            _id: update__id,
            name: update_name,
            sex: update_sex,
            number: update_number,
            mother:update_mother,
            mphone: update_mphone,
            father:update_father,
            fphone: update_fphone,
            snumber:update_snumber,
            ori: update_ori,
            class: update_class,
            grade: update_grade,
            document: update_document
        }).then(res => {
            alert('修改成功')
            setOpen1(false)
            get_list()
        })
        
    }
    let dele = async (e) => {
        console.log(e._id);
        
        await dele_student1({_id:e._id}).then(res => {
            alert('删除成功')
            get_list()
        })
    }
    const handleTableChange = (pagination) => {
        console.log(pagination);
        setTableParams({
          pagination,
        });
    
        // `dataSource` is useless since `pageSize` changed
        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
          setData([]);
        }
      };
    return <>
        <div style={{ width: '100vw', height: '100vh', padding: '20px' }}>
            <h3>教师管理</h3>
            <div style={{ width: '80vw', height: '15vh', background: 'white', padding: '10px 30px', borderRadius: '20px' }}>
                <div style={{ marginTop: '20px' }}>
                    姓名：<Input value={find_name} onChange={(e) => { setFind_name(e.target.value) }} style={{ width: '150px', height: '25px', marginRight: '20px' }}></Input>
                    证件号码：<Input value={find_number} onChange={(e) => { setFind_number(e.target.value) }} style={{ width: '150px', height: '25px', marginRight: '20px' }}></Input>
                    年级：<Select onChange={handleChange} defaultValue={"选择年级"} style={{ width: '120px', marginRight: '20px' }} options={grade.map(i => ({ label: i.grade, value: i._id }))} />
                    班级：<Select onChange={handleChange1} defaultValue={"选择班级"} style={{ width: '120px', marginRight: '20px' }} options={clas.map(i => ({ label: i.class, value: i._id }))} /><br></br>
                    <Button style={{ marginTop: '60px', marginRight: '50px' }} type="primary" onClick={find_search}>查询</Button>
                    <Button style={{ marginTop: '60px' }} onClick={reset}>重置</Button>
                </div>
            </div>
            <div style={{ width: '80vw', height: '75vh', background: 'white', marginTop: '50px', padding: '10px 30px', borderRadius: '20px' }}>
                <div style={{ display: 'flex' }}>
                    <Upload action='http://localhost:3010/upload'>
                        <a href='JavaScript:;' style={{ textDecoration: 'none', margin: '10px 10px 10px 65vw' }}><DownloadOutlined />导入学生</a>
                    </Upload>
                    <a href='JavaScript:;' onClick={() => setOpen(true)} style={{ textDecoration: 'none', marginLeft: '10px' }}><PlusCircleTwoTone />新增学生</a>
                </div>
                <Table
                    dataSource={list}
                    columns={columns}
                    pagination={tableParams.pagination}
                    onChange={handleTableChange}
                />
            </div>
        </div>
        {/* 添加 */}
        <Modal
            centered
            open={open}
            onOk={() => { add() }}
            onCancel={() => setOpen(false)}
            width={1000}
            height={1000}
        >
            <h2>基础信息</h2>
            姓名：<Input onChange={(e) => { setAdd_name(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input>
            性别：<Select onChange={(e) => { setAdd_sex(e) }} defaultValue={update_sex} style={{ width: '200px' }} options={[{ label: '男', value: '男' }, { label: '女', value: '女' }]} /><br></br>
            证件类型：<Select onChange={(e) => { setAdd_document(e) }} defaultValue={update_document} style={{ width: '200px', marginRight: '50px', marginTop: '30px' }} options={document.map(i => ({ label: i.document, value: i._id }))} />
            证件号码：<Input onChange={(e) => { setAdd_number(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input><br></br>
            母亲:<Input onChange={(e) => { setAdd_mother(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px', marginTop: '30px' }}></Input>
            联系方式:<Input onChange={(e) => { setAdd_Mphone(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input><br></br>
            父亲:<Input onChange={(e) => { setadd_father(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px', marginTop: '30px' }}></Input>
            联系方式:<Input onChange={(e) => { setAdd_fphone(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input><br></br>
            籍贯：<Input onChange={(e) => { setAdd_ori(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px', marginTop: '30px' }}></Input><br></br>
            <h2>教学信息</h2>
            年级：<Select onChange={(e) => { setAdd_grade(e) }} defaultValue='请选择年级' style={{ width: '120px', marginRight: '20px' }} options={grade.map(i => ({ label: i.grade, value: i._id }))} />
            班级：<Select onChange={(e) => { setAdd_class(e) }} defaultValue='请选择班级' style={{ width: '120px', marginRight: '20px' }} options={clas.map(i => ({ label: i.class, value: i._id }))} />
            学号:<Input onChange={(e) => { setAdd_snumber(e.target.value) }} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input>
        </Modal>
        {/* 修改 */}
        <Modal
            centered
            open={open1}
            onOk={() => { update() }}
            onCancel={() => setOpen1(false)}
            width={1000}
            height={1000}
        >
            <h2>基础信息</h2>
            姓名：<Input onChange={(e) => { setUpdate_name(e.target.value) }} value={update_name} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input>
            性别：<Select onChange={(e) => { setUpdate_sex(e) }} defaultValue={update_sex} style={{ width: '200px' }} options={[{ label: '男', value: '男' }, { label: '女', value: '女' }]} /><br></br>
            证件类型：<Select onChange={(e) => { setUpdate_document(e) }} defaultValue={update_document} style={{ width: '200px', marginRight: '50px', marginTop: '30px' }} options={document.map(i => ({ label: i.document, value: i._id }))} />
            证件号码：<Input onChange={(e) => { setUpdate_number(e.target.value) }} value={update_number} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input><br></br>
            母亲:<Input onChange={(e) => { setUpdate_mother(e.target.value) }} value={update_mother} style={{ width: '200px', height: '25px', marginRight: '50px', marginTop: '30px' }}></Input>
            联系方式:<Input onChange={(e) => { setUpdate_mphone(e.target.value) }} value={update_mphone} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input><br></br>
            父亲:<Input onChange={(e) => { setUpdate_father(e.target.value) }} value={update_father} style={{ width: '200px', height: '25px', marginRight: '50px', marginTop: '30px' }}></Input>
            联系方式:<Input onChange={(e) => { setUpdate_fphone(e.target.value) }} value={update_fphone} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input><br></br>
            籍贯：<Input onChange={(e) => { setUpdate_ori(e.target.value) }} value={update_ori} style={{ width: '200px', height: '25px', marginRight: '50px' , marginTop: '30px'}}></Input><br></br>
            <h2 style={{ marginTop: '30px'}}>教学信息</h2>
            年级：<Select onChange={(e) => { setUpdate_grade(e) }} defaultValue={update_grade} style={{ width: '120px', marginRight: '20px', marginTop: '30px' }} options={grade.map(i => ({ label: i.grade, value: i._id }))} />
            班级：<Select onChange={(e) => { setUpdate_class(e) }} defaultValue={update_class} style={{ width: '120px', marginRight: '20px' }} options={clas.map(i => ({ label: i.class, value: i._id }))} />
            学号:<Input onChange={(e) => { setUpdate_snumber(e.target.value) }} value={update_snumber} style={{ width: '200px', height: '25px', marginRight: '50px' }}></Input>
        </Modal>
    </>
}